<%--
  Created by IntelliJ IDEA.
  User: 谢佳豪
  Date: 2020/10/24
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" isErrorPage="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>${activity.title}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${path}/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/css/font-awesome.css">

</head>
<body>
<!-- 头部导航栏 -->
<%@ include file="../header.jsp" %>
<section class="mt-3">
    <div class="container">
        <div class="container">
            <!-- 分类导航栏 -->
            <div class="row">
                <div class="col">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white small">
                            <li class="breadcrumb-item"><a href="${path}/activity/activitySquare">活动广场</a></li>
                            <li class="breadcrumb-item"><a
                                    href="${path}/activity/selectActivities?cid=${activity.cid}&currentPageIndex=1">${activity.catalog.cname}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">${activity.title}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!-- 内容 -->
            <div class="row mt-3">
                <!-- 左侧栏 -->
                <div class="col-lg-8 col-sm-12 shadow-sm">
                    <!-- 左侧栏头部 -->
                    <div class="row">
                        <div class="col-2 ml-4 innerAvatar">
                            <img src="${path}${activity.user.photo}" alt="头像" class="rounded-circle ml-2 shadow"
                                 style="width: 60px; height: 60px">
                        </div>
                        <div class="col-6 ml-3 innerInfo" id="div1" style="position: relative">
                            <p style="max-height: 10px;">${activity.user.nickname}</p>
                            <p class="small text-primary" ><a href="${path}/user/${activity.user.uid}" id="username" style="text-decoration: none;">@${activity.user.username}</a></p>
                            <p class="small text-muted" style="margin-top: -10px;">发布于:${activity.publish_time}</p>
                        </div>
                        <div id="div2"
                             style="position: relative; top: 10px; right: 2px;width: 50px;height: 30px; line-height: 30px">
                            <img src="${path}/images/view.png" alt=""
                                 style="width: 20px;height: 20px;margin-bottom: 3px;">
                            <p style="display: inline-block; font-size: 18px;">${activity.view}</p>
                        </div>
                    </div>
                    <div class="ml-5 mt-3" style="line-height: 15px;">
                        <div class="row">
                            <h5 class="font-weight-normal">${activity.title}</h5>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">规模</p>
                            <p class="col-10">${activity.scale == 1 ? '院级' : (activity.scale == 2 ? '校级' : (activity.scale == 3 ? '省级' : '国家级'))}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">发布时间：</p>
                            <p class="col-10">${activity.publish_time}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">结束时间：</p>
                            <p class="col-10">${activity.end_time}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">招募状态：</p>
                            <p class="col-10">${activity.status == 1 ? "正在招募..." : "活动已结束！"}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-4" style="margin-left: -15px;">已参加的队员：${activity.list}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-4" style="margin-left: -15px;">招募内容：</p>
                        </div>
                        <div class="row text-muted">
                            <div class="col-12 overflow-auto"
                                 style="margin-left: -15px;line-height: 20px;height: 180px;">${activity.content}</div>
                        </div>
                        <shiro:authenticated>
                            <div class="row justify-content-end mb-2 text-right">
                                <div class="col-3">
                                    <button type="button" class="btn btn-outline-primary"
                                            onclick="toSend()">
                                        <i class="fa fa-envelope-o" aria-hidden="true"></i>联系我!
                                    </button>
                                </div>
                            </div>
                        </shiro:authenticated>
                    </div>
                </div>
                <!-- 右侧栏-->
                <div class="col-lg-3 ml-3 d-none d-lg-block shadow-sm mb-5" style="max-height: 260px;">
                    <h5 class="mt-3 text-muted">关于作者</h5>
                    <div class="row mt-3 mb-3">
                        <div class="col-5">
                            <div>
                                <a href="${path}/user/${activity.user.uid}">
                                <img src="${path}${activity.user.photo}" alt="头像" style="width: 90px; height: 90px;"
                                     class="rounded-circle shadow-sm text-center"></a>
                            </div>
                        </div>
                        <div class="col-7">
                            <p class="pt-3">${activity.user.nickname}</p>
                            <p class="text-primary small" style="margin-top: -10px">
                                <a href="${path}/user/${activity.user.uid}" style="text-decoration: none;">@${activity.user.username}</a>
                            </p>
                            <p class="text-info small" style="margin-top: -10px">${activity.user.major}</p>
                        </div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="row justify-content-center mt-3">
                        <div class="col-4 text-muted text-center">
                            <p class="small">点赞数</p>
                            <p class="font-weight-bold" style="margin-top: -10px">${activity.user.likes}</p>
                        </div>
                        <div class="col-4 text-muted text-center">
                            <p class="small">主题数</p>
                            <p class="font-weight-bold" style="margin-top: -10px" id="searchNum"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- <footer class="footer mt-auto py-3 fixed-bottom shadow" style="background: lightgrey">
    <div class="container">
        <span class="text-muted ml-2">@WDNBD</span>
    </div>
</footer> -->

<!-- 退出登录的模态框 -->
<div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="prompt-text">点击"确定"退出账号</div>
                <div class="bgimg_lf"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
<script src="${path}/js/jquery.min.js"></script>
<script src="${path}/js/bootstrap.bundle.js"></script>
<script>
    function toSend() {
        let username = document.getElementById("username").innerHTML.replace("@","");

        window.location.href = '/message/send?friendname=' + username;
    }
    //请求获取主题数
    const uid = ${activity.user.uid};
    $.ajax({
        type:"GET",
        url:"/activity/searchNum?uid=" + uid,
        dataType:"json",
        success:function(e){
            $("#searchNum").html(e.data);
        }
    });

</script>
<shiro:authenticated>
    <script src="/js/message.js"></script>
</shiro:authenticated>
</body>
</html>
